<template>
	<view class="main p30">
		<view class="tabs fx-c-c" :style="'background-image: url(' + ossurl.box.arena.tabs_bj + ');'">
			<view class="item" v-for="(item,index) in tabsList" :key="index">
				<image @click="onTabs(index)" :src="tabsIndex == index ? item.select : item.unchecked"></image>
			</view>
			<view class="link">
				<view class="center fx-c-s">
					<image :src="ossurl.box.arena.link" style="width: 30rpx; height: 60rpx;"></image>
					<image :src="ossurl.box.arena.link" style="width: 30rpx; height: 60rpx;"></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="warehouse" @click="toStore">
				<image :src="ossurl.box.arena.warehouse" style="width: 80rpx; height: 148rpx;"></image>
			</view>
			<view class="refresh" @click="init">
				<image :src="ossurl.box.arena.refresh" style="width: 80rpx; height: 80rpx;"></image>
			</view>
			<template v-if="tabsIndex == 0">
				<view class="center1">
					<scroll-view scroll-y="true" class="scroll-X" scroll-left="0" scroll-with-animation="true">
						<view class="listSection" :style="{height: 130*5 + 'rpx'}">
							<view class="item fx-c" v-for="(item,index) in list" :key="index">
								<view class="type fx-c-c">
									<image :src="item.grade" style="width: 70rpx; height: 80rpx;"></image>
								</view>
								<view class="product fx-c">
									<scroll-view scroll-x="true" class="scroll-Y" scroll-left="0" scroll-with-animation="true">
										<view class="ul" :style="{width: 152*6+98 + 'rpx'}">
											<view class="li" v-for="(item,index) in 6" :key="index">
												<image :src="ossurl.box.arena.product" style="width: 152rpx; height: 162rpx;"></image>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
			<template v-if="tabsIndex == 1">
				<view class="center2">
					<scroll-view scroll-y="true" class="scroll-X" scroll-left="0" scroll-with-animation="true">
					<view class="ul p30" :style="{height: 130*5 + 'rpx'}">
						<view class="li fx-c-s" v-for="(item,index) in 5" :key="index">
							<view class="img">
								<image :src="ossurl.box.arena.product" style="width: 72rpx; height: 78rpx;"></image>
							</view>
							<view class="text">
								<view class="t fx-c-s">
									<view class="l">
										<text>霍文轩</text>
									</view>
									<view class="r">
										
									</view>
								</view>
								<view class="b fx-c-s">
									<text>2037/11/03 17:55</text>
									<text>ふみふみクロエ 通常版</text>
								</view>
							</view>
						</view>
					</view>
					</scroll-view>
				</view>
			</template>
			<view class="submit">
				<image :src="ossurl.box.arena.submitBut" style="width: 270rpx; height: 73rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
import ossurl from '@/utils/ossurl'
export default {
	components:{
		
	},
	data() {
		return {
			ossurl,
			tabsList: [
				{
					name: "奖品预览",
					select: ossurl.box.arena.tabs_1_0,
					unchecked: ossurl.box.arena.tabs_1_1,
					state: 0
				},
				{
					name: "中奖记录",
					select: ossurl.box.arena.tabs_2_0,
					unchecked: ossurl.box.arena.tabs_2_1,
					state: 0
				}
			],
			tabsIndex: 0,
			list: [
				{
					name: '级赏品S',
					grade: ossurl.box.arena.gradeS
				},
				{
					name: '级赏品A',
					grade: ossurl.box.arena.gradeA
				},
				{
					name: '级赏品B',
					grade: ossurl.box.arena.gradeB
				},
				{
					name: '级赏品C',
					grade: ossurl.box.arena.gradeC
				},
				{
					name: '级赏品D',
					grade: ossurl.box.arena.gradeD
				},
			]
		}
	},
	onLoad() {
		
	},
	onShow() {

	},
	methods: {
		onTabs(i) {
			this.tabsIndex = i;
		},
		toStore() {
			uni.navigateTo({
			    url: '/pages/store/index'
			});
		},
		init() {
			
		}
	}
}
</script>

<style lang="scss" scoped>
	.main {
		position: relative;
		.link{
			position: absolute;
			left: 0rpx;
			top: 54rpx;
			z-index: 2;
			width: 100%;
			.center{
				width: 74%;
				margin: 0 auto;
			}
		}
		.tabs {
			width: 428rpx;
			height: 82rpx;
			margin: 0 auto 16rpx;
			background-size: 100% 100%;
			position: relative;
			z-index: 2;
			.item{
				image{
					width: 196rpx;
					height: 58rpx;
				}
			}
		}

		.list {
			width: 100%;
			height: 796rpx;
			background: rgba(14, 10, 30, 0.3);
			box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 50rpx;
			margin-top: -60rpx;
			padding: 48rpx 15rpx;
			position: relative;
			.warehouse{
				position: absolute;
				top: 37rpx;
				right: -28rpx;
				z-index: 10;
			}
			.refresh{
				position: absolute;
				bottom: 183rpx;
				right: -31rpx;
				z-index: 10;
			}
			.submit{
				width: 100%;
				text-align: center;
				margin-top: -50rpx;
			}
			.center2{
				background-image: linear-gradient(#E7E2E3, #E3DEF3);
				box-sizing: border-box;
				border-radius: 50rpx;
				width: 100%;
				height: 100%;
				overflow: hidden;
				padding: 30rpx 28rpx 60rpx;
				box-sizing: border-box;
				.scroll-X{
					width: 100%;
					height: 100%;
					border-radius: 40rpx;
					overflow: hidden;
				}
				.ul{
					width: 100%;
					height: 100%;
					background: #fff;
					border-radius: 40rpx;
					overflow: hidden;
					.li{
						border-bottom: 4rpx solid #E5EAEC;
						padding: 20rpx 0;
						.img{
							width: 20%;
						}
						.text{
							width: 80%;
							.t{
								margin-bottom: 10rpx;
								.l{
									text{
										color: #000;
										font-size: 26rpx;
									}
								}
								.r{
									
								}
							}
							.b{
								text{
									&:nth-child(1) {
										color: #9E9E9E;
										font-size: 24rpx;
									}
									&:nth-child(2) {
										color: #000;
										font-size: 24rpx;
										width: 180rpx;
										white-space: nowrap; /* 确保文本在一行内显示 */
										overflow: hidden; /* 隐藏溢出的内容 */
										text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
									}
								}
							}
						}
					}
				}
			}
			.center1{
				background-image: linear-gradient(#E7E2E3, #E3DEF3);
				box-sizing: border-box;
				border-radius: 50rpx;
				width: 100%;
				height: 100%;
				overflow: hidden;
				padding: 30rpx 28rpx 60rpx;
				box-sizing: border-box;
				.scroll-X{
					width: 100%;
					height: 100%;
					border-radius: 40rpx;
					overflow: hidden;
				}
				.item{
					margin-bottom: 10rpx;
					background: #fff;
					.type{
						height: 100rpx;
						padding: 0 30rpx;
						image{
							width: 80%;
						}
					}
					.product{
						width: 100%;
						.scroll-Y{
							width: 100%;
							.ul{
								.li{
									width: 152rpx;
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
